import { lazy, Suspense, useState } from 'react'
import { Button, Flex, Spin } from 'antd'

// webpackChunkName 打包后的文件命名
// preload 用于提前加载当前页面所需的资源，这些资源在页面加载时会被立即加载
// prefetch 提前加载将来可能需要的资源，这些资源会在浏览器空闲时加载，不会阻塞当前页面的加载

const PreFetchDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreFetchDemo" */
      /*webpackPrefetch: true*/
      '@/views/test-pre/PreFetchDemo'
    )
)

// preload
const PreloadDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreloadDemo" */
      /*webpackPreload: true*/
      '@/views/test-pre/PreloadDemo'
    )
)

function TestPre() {
  const [show, setShow] = useState(false)
  const onClick = () => {
    setShow(!show)
  }
  return (
    <Flex>
      <Button onClick={onClick}>切换</Button>
      {show ? (
        <Suspense fallback={<Spin>loading...</Spin>}>
          <PreFetchDemo />
          <PreloadDemo />
        </Suspense>
      ) : null}
    </Flex>
  )
}
export default TestPre
